<template>
  <div class="revise_body">
    <!-- 图片上传 -->
    <div class="body_left">
      <div ref="userform">
        <img :src="form.imgUrl">
      </div>
      <div>
          <div>
              跳转地址&nbsp;:
          </div>
          <el-input v-model="form.hrefUrl" clearable></el-input>
      </div>
      <div class="body_right">
        <el-button>上传图片</el-button><input @change="add" type="file" class="kjj">  
        <el-button @click="revise()">确认修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 修改轮播图
import { ref,reactive } from 'vue-demi'
import {UploadBanner,subbanner} from '@/api/home';
import { useStore } from 'vuex'
import {ElMessage} from 'element-plus'
export default {
    name:'imgbanner',
    props:{
        img:{
            type:Object,
            default:()=>({})
        }
    },
    setup(props){
      const store=useStore()
      const form=reactive({
        id:props.img.id,
        imgUrl:props.img.imgUrl,
        hrefUrl:props.img.hrefUrl
      })
      console.log(form.hrefUrl);
      const userform=ref(null)
      const add=(data)=>{
        if(data==undefined){
          return
        }else{
          let file=data.target.files[0];
          let img=new FileReader();
          img.readAsDataURL(file)
          img.onload=({target})=>{
          form.imgUrl=target.result;
          }
          var param=new FormData();
          param.append("icon",file);
            UploadBanner(param).then(data=>{
              form.imgUrl='http://127.0.0.1:99/'+data.data.tmp_path
            })
        }
      }
      const revise=()=>{
        subbanner({id:form.id,img:form.imgUrl,url:form.hrefUrl}).then(data=>{
            if(data.meta.status!==200) return ElMessage.error('修改轮播图失败')
            ElMessage({message: '修改轮播图成功',type: 'success',})
        })
      }
      return{add,userform,form,revise}
    }
    }
</script>

<style scoped lang="less">
.revise_body {
  width: 400px;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px auto;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  margin:0 10px;
}

.body_left img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.body_right {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.kjj {
  display: none;
}

.el-button {
  margin: 0 10px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.el-button:hover {
  background-color: #66b1ff;
}
</style>